<template>
    <div class="common-layout">
      <el-container style="height: 100vh; width: 100vw;">
        <!-- 顶部导航栏 -->        
        <el-container>
          <!-- 左侧可收缩菜单 -->
          <el-aside :width="isCollapse ? '64px' : '200px'" style="background-color: #fff; transition: width 0.3s;overflow-y: auto; max-height: calc(100vh - 60px);">
            <el-menu
            router
              :default-active="activeMenu"
              :default-openeds="['1']"
              class="el-menu-vertical-demo"
              :collapse="isCollapse"
             :collapse-transition="false"
              background-color="#fff"
              text-color="#000"
              active-text-color="rgb(110, 78, 208)"
              @open="handleOpen"
              @close="handleClose"
            >
              <!-- 折叠按钮 -->
              <div style="height: 20px; width: 100%; display: flex; justify-content: flex-end; align-items: center;">
                <el-icon v-if="isCollapse" :size="20" style="cursor: pointer;" @click="toggleCollapse">
                 <Expand />
                </el-icon>
                <el-icon v-else :size="20" style="cursor: pointer;" @click="toggleCollapse">
                  <Fold />
                </el-icon>
              </div>
          

          <!-- 告警管理 -->
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Bell /></el-icon>
              <span>告警管理</span>
            </template>

            <el-menu-item index="/newHomePage/alarm">
              <template #title>
                <el-icon><Warning /></el-icon>
                <span>告警管理</span>
              </template>
            </el-menu-item>

            <el-menu-item index="/newHomePage/flaw">
              <template #title>
                <el-icon><CloseBold /></el-icon>
                <span>缺陷管理</span>
              </template>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
              <template #title>
                <el-icon><Search /></el-icon>
                <span>智能巡检</span>
              </template>
    
     <!-- 用户管理（二级菜单） -->
     <el-menu-item index="/newHomePage/trace">
                <template #title>
                  <el-icon><Location /></el-icon>
                  <span>巡视跟踪</span>
                </template>
              </el-menu-item>
    
    <!-- 角色管理（二级菜单） -->
              <el-menu-item index="/newHomePage/result">
                <template #title>
                  <el-icon><View /></el-icon>
                  <span>结果监控</span>
                </template>
            </el-menu-item>

            <el-menu-item index="/newHomePage/task">
                <template #title>
                  <el-icon><Calendar /></el-icon>
                  <span>巡视任务</span>
                </template>
            </el-menu-item>
          </el-sub-menu>


          <el-sub-menu index="3">
              <template #title>
                <el-icon><Collection /></el-icon>
                <span>资源管理</span>
              </template>
    
     <!-- 用户管理（二级菜单） -->
     <el-menu-item index="/newHomePage/towerList">
                <template #title>
                  <el-icon><OfficeBuilding /></el-icon>
                  <span>通信塔管理</span>
                </template>
              </el-menu-item>
    
    <!-- 角色管理（二级菜单） -->
              <el-menu-item index="/newHomePage/towerType">
                <template #title>
                  <el-icon><Histogram /></el-icon>
                  <span>塔型管理</span>
                </template>
            </el-menu-item>

            <el-menu-item index="/newHomePage/DJI">
                <template #title>
                  <el-icon><Share /></el-icon>
                  <span>DJI账号</span>
                </template>
            </el-menu-item>

            <el-menu-item index="/newHomePage/algorithm">
                <template #title>
                  <el-icon><Cpu /></el-icon>
                  <span>算法管理</span>
                </template>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="4">
              <template #title>
                <el-icon><Setting /></el-icon>
                <span>系统管理</span>
              </template>
    
    <!-- 用户管理（二级菜单） -->
              <el-menu-item index="/newHomePage/organization">
                <template #title>
                  <el-icon><User /></el-icon>
                  <span>组织机构</span>
                </template>
              </el-menu-item>
    
    <!-- 角色管理（二级菜单） -->
              <el-menu-item index="/newHomePage/usermanagement">
                <template #title>
                  <el-icon><Avatar /></el-icon>
                  <span>用户管理</span>
                </template>
            </el-menu-item>

            <el-menu-item index="/newHomePage/rolepermissions">
                <template #title>
                  <img
                  :src="isActive('/newHomePage/rolepermissions') ? roleIconActive : roleIcon"
                  alt="icon"
                  style="width: 16px; height: 16px;margin-left: 5px; margin-right: 10px;"
                  />
                  <span>角色权限</span>
                </template>
            </el-menu-item>
            <el-menu-item index="/newHomePage/operationLogs">
                <template #title>
                  <el-icon><Edit /></el-icon>
                  <span>操作日志</span>
                </template>
            </el-menu-item>
            <el-menu-item index="/newHomePage/loginLogs">
                <template #title>
                  <el-icon><Key /></el-icon>
                  <span>登录日志</span>
                </template>
            </el-menu-item>
          </el-sub-menu>

            </el-menu>
          </el-aside>
          <!-- 主内容区域 -->
          <el-main style="padding: 20px; background-color: #f0f2f5;">
            <div style="background-color: white; border-radius: 4px; height:calc(100vh - 100px);width: calc(100% - 40px);">
                <router-view></router-view>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  
  <script lang="ts" setup>
  import roleIcon from '@/assets/image/userRole.png'
  import roleIconActive from '@/assets/image/userRoled.png'
  import { ref, onMounted, onBeforeUnmount , watch } from 'vue'
  import {
  Setting, Avatar, User, Expand, Fold, Bell,
  Collection, Cpu, Calendar, Location, View, Share,
  OfficeBuilding, Histogram, Key, Edit, UserFilled,
  Search, Warning, CloseBold
} from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router'
  import { useRoute } from 'vue-router'
  const route = useRoute()
  const activeMenu = ref(route.path) // 初始化为当前路由路径
  const router = useRouter()
  const isCollapse = ref(false)
  const currentTime = ref('')
  const isActive = (path: string) => route.path === path;
  
  const handleOpen = (key: string, keyPath: string[]) => {
}
  const handleClose = (key: string, keyPath: string[]) => {
  }
  
  const toggleCollapse = () => {
    isCollapse.value = !isCollapse.value
  }
  
  // 更新时间
  const updateTime = () => {
    const now = new Date()
    currentTime.value = now.toLocaleString()
  }
  
  // 设置定时器更新时间
  let timer: number
  onMounted(() => {
    updateTime()
    timer = setInterval(updateTime, 1000)
  })
  
  onBeforeUnmount(() => {
    clearInterval(timer)
  })

  // 监听路由变化，动态更新 activeMenu
watch(() => route.path, (newPath) => {
  activeMenu.value = newPath
})
  </script>
  
  <style scoped>
  .common-layout {
    height: calc(100vh -140px);
    width: 100vw;
    overflow: hidden;
  }
  
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: calc(100vh - 60px);
  }
  
  .el-menu--collapse {
    min-height: calc(100vh - 60px);
  }
  
  .el-dropdown-link {
    cursor: pointer;
    color: rgb(0, 0, 0);
    display: flex;
    align-items: center;
  }
  
  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }
  
  .el-aside {
    transition: width 0.3s;
    overflow: hidden;

  }
  
  .el-main {
    padding: 0;
    height: calc(100vh - 60px);
    overflow: auto;
  }

/* 选中三级菜单项样式 */
.el-menu-item.is-active {
  color: rgb(110, 78, 208) !important;
  background-color: rgba(110, 78, 208, 0.1) !important;
}

/* 选中三级菜单项时，对应的所有上级菜单文字变色 */
.el-menu--vertical .el-menu-item.is-active ~ .el-sub-menu > .el-sub-menu__title,
.el-menu--vertical .el-sub-menu.is-active > .el-sub-menu__title,
.el-menu--vertical .el-sub-menu.is-opened > .el-sub-menu__title {
  color: rgb(110, 78, 208) !important;
}

/* 确保上级菜单背景不变 */
.el-sub-menu .el-sub-menu__title {
  background-color: transparent !important;
}

/* 鼠标悬停效果 */
.el-menu-item:hover {
  background-color: rgba(110, 78, 208, 0.05) !important;
}
.el-sub-menu__title:hover {
  background-color: rgba(110, 78, 208, 0.05) !important;
}
  </style>